<template>
  <div>
    <select name="" id="" v-model="option1" v-cloak>
      <option v-for="(item, i) in select" :key="i" :option="item.name">
        {{ item.name }}
      </option>
    </select>
    <select name="" id="" v-model="option2" v-cloak>
      <option v-for="(ele, i) in select2" :key="i" :option="ele.name">
        {{ ele.name }}
      </option>
    </select>
    <select name="" id="" v-model="option3" v-cloak>
      <option v-for="(el, i) in select3" :key="i" :option="el.name">
        {{ el.name }}
      </option>
    </select>
  </div>
</template>
<script>
var arrAll = [
  { name: "选择项目", sub: [{ name: "请选择" }], type: 1 },
  {
    name: "厨房",
    sub: [
      { name: "请选择", sub: [] },
      {
        name: "电路",
        sub: [
          { name: "请选择" },
          { name: "灯具" },
          { name: "电闸" },
          { name: "房屋停电" },
          { name: "开关" },
          { name: "排风扇" },
          { name: "插座" },
          { name: "线路" },
        ],
        type: 0,
      },
      {
        name: "电器",
        sub: [
          { name: "请选择" },
          { name: "电磁炉" },
          { name: "油烟机" },
          { name: "热水器" },
          { name: "燃气灶" },
          { name: "微波炉" },
        ],
        type: 0,
      },
      {
        name: "家具",
        sub: [{ name: "请选择" }, { name: "电热水壶" }],
        type: 0,
      },
      {
        name: "家居",
        sub: [{ name: "请选择" }, { name: "桌台" }],
        type: 0,
      },
      {
        name: "疏通",
        sub: [
          { name: "请选择" },
          { name: "地漏疏通" },
          { name: "洗池疏通" },
          { name: "管道疏通" },
        ],
        type: 0,
      },
      {
        name: "水暖",
        sub: [
          { name: "请选择" },
          { name: "闸门" },
          { name: "水龙头" },
          { name: "水管" },
          { name: "主管道" },
          { name: "暖气" },
        ],
        type: 0,
      },
      {
        name: "锁类",
        sub: [{ name: "请选择" }, { name: "机械锁" }, { name: "门锁" }],
        type: 0,
      },
      {
        name: "主体",
        sub: [{ name: "请选择" }, { name: "窗户" }],
        type: 0,
      },
    ],
    type: 1,
  },
  {
    name: "客厅",
    sub: [
      { name: "请选择", sub: [] },
      {
        name: "餐桌",
        sub: [{ name: "请选择" }, { name: "桌角" }],
        type: 0,
      },
    ],
    type: 1,
  },
  {
    name: "客厅卫生间",
    sub: [
      { name: "请选择", sub: [] },
      {
        name: "餐桌",
        sub: [{ name: "请选择" }, { name: "桌角" }],
        type: 0,
      },
    ],
    type: 1,
  },
  {
    name: "客厅阳台",
    sub: [
      { name: "请选择", sub: [] },
      {
        name: "餐桌",
        sub: [{ name: "请选择" }, { name: "桌角" }],
        type: 0,
      },
    ],
    type: 1,
  },
  {
    name: "卧室",
    sub: [
      { name: "请选择", sub: [] },
      {
        name: "餐桌",
        sub: [{ name: "请选择" }, { name: "桌角" }],
        type: 0,
      },
    ],
    type: 1,
  },
  {
    name: "卧室阳台",
    sub: [
      { name: "请选择", sub: [] },
      {
        name: "餐桌",
        sub: [{ name: "请选择" }, { name: "桌角" }],
        type: 0,
      },
    ],
    type: 1,
  },
  {
    name: "卧室卫生间",
    sub: [
      { name: "请选择", sub: [] },
      {
        name: "餐桌",
        sub: [{ name: "请选择" }, { name: "桌角" }],
        type: 0,
      },
    ],
    type: 1,
  },
];
export default {
  data() {
    return {
      select: arrAll,
      option1: "厨房",
      option2: "电路",
      option3: "灯具",
      select2: [],
      select3: [],
    };
  },
  methods: {
    update1() {
      this.select.forEach((item) => {
        if (item.name == this.option1) {
          this.select2 = item.sub;
        }
      });
      this.option2 = this.select2[1].name;
    },
    update2() {
      this.select2.forEach((ele) => {
        if (ele.name == this.option2) {
          this.select3 = ele.sub;
        }
      });
      if (this.select3.length > 0 && this.select3[1].name) {
        this.option3 = this.select3[1].name;
      } else {
        this.option3 = "";
      }
    },
  },
  created() {
    this.update1();
    this.update2();
  },
  watch: {
    //检测vue实例变化
    option1() {
      this.update1();
      this.update2();
    },
    option2() {
      this.update2();
    },
  },
};
</script>
<style lang="scss" scoped>
</style>